<%--
  Created by IntelliJ IDEA.
  User: acer
  Date: 2020/6/5
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>用户列表</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
    <div id="root3">
        <Collapse value="Panel">
            <Panel name="Panel">
                多条件查询
                <p slot="content">
                    <i-form :label-width="60" inline>
                        <Form-Item label="账号">
                            <i-input type="text" v-model="staffVo.staffCode"></i-input>
                        </Form-Item>
                        <Form-Item label="姓名">
                            <i-input type="text" v-model="staffVo.staffName"></i-input>
                        </Form-Item>
                        <i-button type="primary" @click="pageNo=1;getList();">搜索</i-button>
                    </i-form>
                </p>
            </Panel>
        </Collapse>
        <Card style="margin: 20px 0" >

            <Icon type="ios-film-outline"></Icon>
            数据列表
            <shiro:hasPermission name="staff:add">
            <i-button type="primary"  @click="add" :style="{float:'right'}">添加角色</i-button>
            </shiro:hasPermission>

        </Card>
        <i-table :columns="columns" :data="data" border stripe height="370">
            <template slot-scope="{row,index}" slot="qy">
                <i-Switch :value="row.whether === 1?true:false" @on-change="change(row,index)"  />
                <%--<i-switch :value="row.returnState == 1?true:false" @on-change="change(row,index)" />--%>
            </template>
            <template slot-scope="{row,index}" slot="roleName">
                {{row.role.roleName}}
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <shiro:hasPermission name="staff:grant">
                <i-Button type="primary"  @click="assign(row,index)">分配角色</i-Button>
                </shiro:hasPermission>
               <%-- <i-Button type="error"  @click="">分配角色</i-Button>    &lt;%&ndash;fenp(row)&ndash;%&gt;--%>
                <shiro:hasPermission name="staff:update">
                <i-Button type="info"  @click="update(row,index)">编辑</i-Button>
                </shiro:hasPermission>
                <shiro:hasPermission name="staff:del">
                <i-Button type="primary"  @click="del(row,index)">删除</i-Button>
                </shiro:hasPermission>
            </template>
        </i-table>
        <Modal v-model="modalassign" title="分配角色" @on-ok="doassign">
            <i-form >
                <Form-Item label="选择角色">
                    <i-Select v-model="staff.roleId" clearable  style="width: 120px;">
                        <i-Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.roleName }}</i-Option>
                    </i-Select>
                </Form-Item>
            </i-form>
        </Modal>
        <template>
            <Page :total="total1"
                  show-total
                  show-elevator
                  :page-size="pageSize"
                  style="margin-left: 30%;"
                  :current.sync="pageNo"
                  show-sizer
                  :page-size-opts="[5,10,15,20]"
                  @on-page-size-change="pageSize=arguments[0];getList();"
                  @on-change="getList"/>
        </template>
        <Modal v-model="modaladd" title="添加角色" @on-ok="doadd">
            <i-form :label-width="80">
                <Form-Item label="账号">
                        <%--原生事件onkeyup，改成了@keyup，并且需要在后边追加修饰符.native，这样就是告诉vue使用input的原生事件监听方法--%>
                    <i-input v-model="staff.staffCode" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                                                <%-- $event.target.value指向的是当前的input的值、 replace(/^\s+|\s+$/gm,'')去除input的空字符串--%>
                </Form-Item>
                <Form-Item label="姓名">
                    <i-input v-model="staff.staffName" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                </Form-Item>
                <Form-Item label="密码">
                    <i-input v-model="staff.password" type="password" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                    <p style="color:red;font-size:10px;">*&nbsp;账号、姓名、密码中不能有空格和标点符号，如果输入将自动删除</p>
                </Form-Item>
                <Form-Item label="是否启用">
                    <Radio-Group v-model="staff.whether">
                        <Radio :label="1">
                            <span>启用</span>
                        </Radio>
                        <Radio :label="0">
                            <span>没启用</span>
                        </Radio>
                    </Radio-Group>
                </Form-Item>
            </i-form>
        </Modal>
        <Modal v-model="modalupdate" title="修改角色" @on-ok="doupdate" :loading="loading" @on-cancel="noupdate">
            <i-form :label-width="80">
                <Form-Item label="账号">
                    <i-input  v-model="staff.staffCode" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                </Form-Item>
                <Form-Item label="姓名">
                    <i-input v-model="staff.staffName" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                </Form-Item>
                <Form-Item label="密码">
                    <i-input v-model="staff.password" type="password" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                    <p style="color:red;font-size:10px;">*&nbsp;账号、姓名、密码中不能有空格或标点符号，如果输入将自动删除</p>
                </Form-Item>
                <Form-Item label="是否启用">
                    <Radio-Group v-model="staff.whether">
                        <Radio :label="1">
                            <span>启用</span>
                        </Radio>
                        <Radio :label="0">
                            <span>没启用</span>
                        </Radio>
                    </Radio-Group>
                </Form-Item>
            </i-form>
        </Modal>
        <%--<Modal v-model="modafenp" title="用户授权" @on-ok="doupdate">--%>
            <%--<i-Select v-model="staff.roleId" remote :remote-method="getrolelist" style="width: 120px;">--%>
                <%--<i-Option v-for="item in rolelist" :value="item.id" :key="item.id">{{item.roleName}}</i-Option>--%>
            <%--</i-Select>--%>
        <%--</Modal>--%>
    </div>
</body>
<script>
    new Vue({
        el:"#root3",
        data:{
            columns:[
                {title:"编号",key:"id"},
                {title:"账号",key:"staffCode"},
                {title:"姓名",key:"staffName"},
                {title:"角色名称", slot: 'roleName'},
                {title:"添加时间",key:"createdDate"},
                {title:"修改时间",key:"modifyDate"},
                {title:"是否启用",slot:"qy"},
                {title:"操作",slot:"action"}
            ],
            data:[],
            staff:{},
            modaladd:false,
            modalupdate:false,
            staffVo:{},
            total1:{},
            pageSize:5,
            pageNo:1,
            ReturnReason:{},
            ReturnReason:{},
            modalassign:false,
            roleList:[],
            loading:true,
        },
        mounted(){
            this.getList();
            this.getRoleList();
        },
        methods: {
            getRoleList(){
                axios.post("/jur/role/rolelist")
                    .then(({data})=>{
                        this.roleList = data.result;
                    })
            },
            change (row,index) {
                if(row.whether==1){
                    row.whether=0;
                }else if(row.whether==0){
                    row.whether=1;
                }
                this.staff=row;
                axios.post("/jur/staff/update",this.staff)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.getList();
                    })
            },
            getList(){
                axios.post(`/jur/staff/list/${this.pageSize}/${this.pageNo}`,this.staffVo).then(
                    ({data})=>{
                        this.data=data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            getUserList(){
                axios.post("/jur/staff/staffList").then(
                    ({data})=>{
                        this.data=data.result;
                    }
                )
            },
            add(){
                this.staff={};
                this.modaladd=true;
            },
            doadd(){
                axios.post(`/jur/staff/add`,this.staff)
                    .then(({data})=>{
                        if(data.code==1000){
                            iview.Message.success({content:data.msg});
                            this.getList();
                        }else {
                            iview.Message.error({content:data.msg});
                        }

                    })
            },
            messageWarningFn (text) {
                this.$Message.warning(text)
                setTimeout(() => {
                    this.loading = false
                    this.$nextTick(() => {
                        this.loading = true
                    })
                }, 500)
            },
            update(row,index){
                this.staff=row;
                this.modalupdate=true;
            },
            doupdate(){
                if(!this.staff.staffCode){
                    this.messageWarningFn('账号不能为空！')
                    return
                }
                if(!this.staff.staffName){
                    this.messageWarningFn('姓名不能为空！')
                    return
                }
                if(!this.staff.password){
                    this.messageWarningFn('密码不能为空！')
                    return
                }else{
                    this.loading=false;
                    axios.post(`/jur/staff/update`,this.staff)
                        .then(({data})=>{
                            parent.vm.getIndexstaff();
                            iview.Message.success({content:data.msg})
                            this.getList();
                            parent.vm.getIndexstaff();
                        })
                }
                this.modalupdate=false;
            },
            del(row,index){
                let _this = this;
                iview.Modal.confirm({
                    title:"确定要删除么兄弟?",
                    content:"删除了就回不来了，确定要删么？",
                    onOk(){
                        axios.get(`/jur/staff/del/${row.id}`)
                            .then(({data})=>{
                                if(data.code == 1000){
                                    iview.Message.success({content:data.msg});
                                    if(index==0){
                                        if(_this.pageNo!=1){
                                            _this.pageNo=_this.pageNo-1;
                                        }
                                    };
                                    _this.getList();
                                }else{
                                    iview.Message.error({content:data.msg});
                                }

                            })
                    },
                    onCancel(){
                        alert("取消")
                    }
                })
            },
            assign(row,index){
                this.staff.id = row.id;
                this.staff.roleId = row.roleId;
                this.modalassign=true;
            },
            doassign(){
                axios.post("/jur/staff/update",this.staff)
                    .then(({data})=>{
                        iview.Message.success("角色分配成功");
                        this.getList();

                    })
            },
            noupdate(){
                iview.Message.info("已取消");
                this.getList();
            }
        }
    })
</script>
</html>
